<template>
  <div :style="{ height }">

    <v-chart v-if="isShowChart" ref="chartRef" :class="className" style="width: 100%;" :option="option"
      @rendered="() => emits('on-chart-ready')" ></v-chart>
    <ga-empty description="暂无数据" v-else :style="{ height, ...emptyStyle }"></ga-empty>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue';
const emptyStyle = {
  margin: 0,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  flexDirection: 'column',
};
const props = defineProps({
  option: {
    type: [Object, Array],
    default: () => ({})
  },
  height: {
    type: String,
    default: '100%'
  },
  noDataImg: {
    type: Object,
    default: () => ({})
  },
  className: {
    type: String,
    default: ''
  }

})
const emits = defineEmits(['on-chart-ready'])
const chartRef = ref()
const isShowChart = computed(() => {
  return props.option.series?.length > 0 && props.option.series[0]?.data?.length > 0
})
defineExpose({
  echartInstance: chartRef.value?.getEchartsInstance() || null
})
</script>

<style scoped lang="scss"></style>
